﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>benner</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="~/layui/layui.js"></script>
    <script src="~/layer/layer/layer.js"></script>
</head>
<body>
    <div class="layui-container">

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
                <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
                <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
            </div>
        </script>
        <table id="demo" class="layui-table" lay-filter="table1"></table>


    </div>


    <script>
        var listUrl = '/HomeConfig/BannerList';


        layui.use('table', function () {
            layui.table.render({
                elem: '#demo'
                , toolbar: '#toolbarDemo'
                , height: 500
                , url: listUrl //数据接口
                , page: true //开启分页
                , limit: 10
                , id: 'idTest'//便于重载表格
                , cols: [[ //表头
                    { type: 'checkbox' }
                    , { field: 'id', title: 'ID', sort: true }
                    , {
                        field: 'url', title: '图片',  height: '150px', sort: false, templet: function (d) {
                            return '<img class="tooltip" src="' + d.url + '"  />'
                        }
                    }
                    , { field: 'sort', title: '排序',  sort: true }
                    , {
                        field: 'state', title: '状态' , templet: function (d) {
                            if (d.state == 1) return '<input type="checkbox" name="state" lay-filter="ztzt" lay-skin="switch" lay-text="开启|关闭" checked>';
                            if (d.state == 0) return '<input type="checkbox" name="state" lay-filter="ztzt" lay-skin="switch" lay-text="开启|关闭">';
                        }}
                ]]
                , parseData: function (res) { //res 即为原始返回的数据
                    tableData = res.data;
                }
            });
        });

        form.on('checkbox(ztzt)', function (data) {
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //是否被选中，true或者false
            console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
        });




        //图片放大
        $(document).on('mouseover', '.tooltip', function (e) {
            var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            var x = e.pageX || e.clientX + scrollX;
            var y = e.pageY || e.clientY + scrollY;
            this.myTitle = this.title;
            this.title = "";
            var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";
            var tooltip = "<div id='tooltip'><img src='" + this.src + "' alt='预览图' style='max-width:500px;max-height:500px;'/>" + imgTitle + "<\/div>"; //创建 div 元素
            $("body").append(tooltip);    //把它追加到文档中
            $("#tooltip")
                .css({
                    "top": "40%",
                    "left": "40%",
                    "position": "absolute"
                }).show("fast");      //设置x坐标和y坐标，并且显示
        });

        $(document).on('mouseout', '.tooltip', function (e) {
            this.title = this.myTitle;
            $("#tooltip").remove();     //移除
        });

        $(document).on('mousemove', '.tooltip', function (e) {
            $("#tooltip")
                .css({
                    "top": "40%",
                    "left": "40%"
                });
        });
    </script>
</body>
</html>
